<template>
  <div class="vue-draggable-cls"
    :draggable="draggable"
    @dragstart="onDragStart($event)"
    @drag="onDrag($event)"
    @dragend="onDragEnd($event)"
    @dragenter="onDragEnter($event)"
    @dragover="onDragOver($event)"
    @dragleave="onDragLeave($event)"
    @drop="onDrop($event)">
      <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      draggable: {
        type: Boolean,
        default: true,
      },
    },
    methods: {
      allowDrop(e) {
        e.preventDefault();
      },

      /* 被拖拽元素 */
      onDragStart(e) {
        if(!this.draggable) return;
        this.$emit('dragStart', e);
      },
      onDrag(e) {
        if(!this.draggable) return;
        this.$emit('dragMove', e);
      },
      onDragEnd(e) {
        if(!this.draggable) return;
        this.$emit('dragEnd', e);
      },

      /* 目标元素 */
      onDragEnter(e) {
        if(!this.draggable) return;
        this.$emit('dragEnter', e);
      },
      onDragOver(e) {
        if(!this.draggable) return;
        this.allowDrop(e);
        this.$emit('dragOver', e);
      },
      onDragLeave(e) {
        if(!this.draggable) return;
        this.$emit('dragLeave', e);
      },
      onDrop(e) {
        if(!this.draggable) return;
        this.allowDrop(e);
        this.$emit('dropStop', e);
      },
    },
  }
</script>

<style lang="scss"></style>
